<template>
  <div id="app">
    <my-header :seller="seller"></my-header>
    <div class="link-wrapper">
      <router-link to="goods">商品</router-link>
      <router-link to="ratings">评价</router-link>
      <router-link to="seller">商家</router-link>
    </div>
    <div class="view-wrapper">
      <router-view :seller="seller" ></router-view>
    </div>

  </div>
</template>

<script type="text/ecmascript-6">
import myHeader from './components/header/header.vue'


export default {
  name: 'app',
  data() {
    return{
      seller:{}
    }
  },
  components:{
    myHeader
  },
  created() {
    this.$http.get('api/seller').then( (res) => {
      res = res.data;
      if(res.errno == 0){
        this.seller = res.data;
      }
    });
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "common/mixin";

#app {

  .link-wrapper{
    display: flex;
    text-align: center;
    @include border-1px(rgba(7,17,27,0.1));
    a{
      flex: 1;
      height: 40px;
      font-size: 14px;
      color: rgb(77,85,93);
      line-height: 40px;
      &.router-link-active{
        color: rgb(240,20,20);
      }
    }

  }

}
</style>
